import React, { useEffect, useState, useRef } from 'react'
import { UseThree, PrismView } from '@/components'
import { message } from 'antd'
import { Texts } from './text'
type Props = {}
function ThreeDom(props: Props) {
  let useThree: UseThree
  const ModalRef = useRef<any>()
  useEffect(() => {
    // eslint-disable-next-line react-hooks/exhaustive-deps
    useThree = new UseThree('canvas')
    // useThree 里面的所有参数和方法都可以通过 useThree.xx拿到
    useThree.renderers.setClearColor('#001529')//改变背景色
    getGltf()
    getFbx()
    onmodelclick()
    // useThree.getother()//其他一些参数 自行添加经常用的方法自己定义

  }, [])
  // 点击模型
  function onmodelclick() {
    useThree.onmodelclick((e) => {
      if (!e) return
      console.log(e); //返回值点击模型的位置
      message.success('你点击了' + e.object.name + ',位置是x：' + e.point.x + 'y：' + e.point.y + 'z：' + e.point.z);
    })

  }
  // 导入fbx
  async function getFbx() {
    // @ts-ignore
    const gltf = await useThree.getFbx(require('../../../assets/fbx/d.fbx'))
    gltf.position.set(-150, 0, 30)

  }
  // 导入gltf模型
  async function getGltf() {
    // @ts-ignore
    const gltf = await useThree.getGlb(require('../../../assets/glb/LittlestTokyo.glb'))
    // 改变大小
    gltf.scene.position.set(100, 100, 30)
    let scale = .5
    gltf.scene.scale.set(scale, scale, scale)
    
  }
  return (
    <div style={{ width: '100%', height: '100%' }}>
      <PrismView html={Texts}></PrismView>
      <div id='canvas' style={{ width: '100%', height: '100%' }}>
      </div>
    </div>

  )
}
export default ThreeDom